<template>
  <div id="job_collect">
    <div class="sub-li" v-for="collect in collectList" :key="collect.jobCollectId">
      <el-button plain  size="mini" style="position:absolute;right:0;bottom:0;" icon="el-icon-delete"
                 @click="deleteCollect(collect.jobCollectId)">删除</el-button>
      <div class="sub-li-left" @click="goJobDetail(collect.job.jobId)" style="cursor:pointer">
        <p class="name">{{ collect.job.jobName }}</p>
        <p class="salary">{{collect.job.minSalary}}-{{collect.job.maxSalary}}K</p>
        <p class="job-text">{{codeToText(collect.job.cityCode)}}
          <el-divider direction="vertical"></el-divider>
          {{collect.job.experience}}
          <el-divider direction="vertical"></el-divider>
          {{collect.job.minEdu}}
        </p>
        <el-divider direction="horizontal"></el-divider>
        <p class="job-text">
          {{collect.job.jobPattern}}
          <span style="padding-left:148px">更新于{{collect.job.updateTime}}</span>
        </p>
      </div>
      <div class="sub-li-right">
        <div>
          <div class="company-info" @click="goCompanyDetail(collect.job.company.companyId)" style="cursor: pointer">
            <h3>{{ collect.job.companyName }}</h3>
            <p class="company_text">
              {{ collect.job.company.companyScale }}
              <el-divider direction="vertical"></el-divider>
              {{ collect.job.company.industry }}
              <el-divider direction="vertical"></el-divider>
              {{collect.job.company.companyType==0?'国企':collect.job.company.companyType==1?'央企':collect.job.company.companyType==2?'民企':'外企' }}
              <el-divider direction="vertical"></el-divider>
              {{ collect.job.company.financeList }}
            </p>
          </div >
          <div class="company_img">
            <img style="width:60px;height:60px"
                 :src="collect.job.company.companyLogoUrl"
                 alt="">
          </div>
          <el-divider direction="horizontal"></el-divider>
          <p class="company_text" style="margin-left:16px;">
            {{collect.job.welfare}}
          </p>
        </div>
      </div>
      <span v-show="collect.job.jobProperty==1" :style="bage" class="badge">
        校招职位
      </span>
    </div>
    <el-empty v-show="collectList.length==0" description="暂无数据"></el-empty>
  </div>
</template>

<script>
import {CodeToText} from "element-china-area-data";
import {deleteCollect, getCollectJob} from "@/network/recruit";

export default {
  name: "JobCollect",
  data(){
    return{
      bage:{
        backgroundImage:'url('+require("../../assets/img/schoolTag.png")+')',
        backgroundRepeat:'no-repeat',
      },
      collectList:[],
    }
  },
  mounted(){
    this.collectJobList();
    console.log(this.collectList)
  },
  methods:{
    codeToText(value){
      return CodeToText[value];
    },
    collectJobList(){
      const userId = localStorage.getItem("common_userId");
      getCollectJob(userId).then(res=>{
        if(res!=undefined){
          this.collectList = res.data.data;
        }
      })
    },
    deleteCollect(jobCollectId){
      console.log(jobCollectId);
      deleteCollect(jobCollectId).then(res=>{
        if(res!=undefined){
          this.$message.success("删除成功！");
          this.collectJobList();
        }
      })
    },
    goJobDetail(jobId){
      this.$router.push({name:"jobDetail",params:{jobId:jobId}});
    },
    goCompanyDetail(companyId){
      this.$router.push({name:"companyDetail",params:{companyId:companyId}});
    },
  }
}
</script>

<style scoped>
#job_collect{
  background-color:white;
  padding: 20px;
  box-shadow: 0 5px 5px 0 #eceaea;
  min-height: 465px;
}
/deep/ .el-tabs__content {
  min-height: 408px;
}
.sub-li {
  display: inline-block;
  margin: 0 8px 8px 0;
  height: 120px;
  width: 98%;
  padding: 16px 20px;
  box-sizing: border-box;
  background-color: white;
  position: relative;
  box-shadow: 2px 3px 0 2px rgb(0 0 0 / 10%);
}

.sub-li-left {
  width: 50%;
  display: inline-block;
}

.sub-li-right {
  width: 50%;
  display: inline-block;
}
.badge{
  position: absolute;
  width: 56px;
  height: 24px;
  padding-left: 5px;
  top: 0;
  left: -5px;
  font-size: 12px;
  color: #fff;
  line-height: 20px;
}
p {
  margin: 0 0;
}

.name {
  display: inline-block;
  font-size: 18px;
  color: #428af5;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary {
  width: 20%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  display: inline-block;
  color: #fc6c38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-text {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 5px 0 5px 0;
}


.company-info {
  display: inline-block;
  height: 60px;
  margin-left: 16px;
}

.company-info h3 {
  height: 22px;
  font-size: 18px;
  font-weight: 400;
  color: #428af5;
  line-height: 22px;
  margin: 0 0 7px 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.company_text {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company_img {
  display: inline-block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  overflow: hidden;
  float: right;
}
</style>